<template>
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
    >
        <el-form-item label="客户编码" prop="code">
            <el-input v-model="ruleForm.code" placeholder="请输入客户编码"/>
        </el-form-item>
        <el-form-item label="客户名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入客户名称"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNum">
            <el-input v-model="ruleForm.phoneNum" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="地址" prop="address">
            <el-input v-model="ruleForm.address" placeholder="请输入地址"/>
        </el-form-item>
        <el-form-item label="业务地区" prop="area">
            <el-input v-model="ruleForm.area" placeholder="请输入业务地区"/>
        </el-form-item>
        <el-form-item label="交易金额" prop="money">
            <el-input v-model.number="ruleForm.money" type="number" placeholder="请输入交易金额"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <!--            <el-button @click="resetForm()">重置</el-button>-->
            <el-button @click="emitCancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import axios from "axios";
import {reactive, ref, watch} from 'vue'
import type {ComponentSize, FormInstance, FormRules} from 'element-plus'
import type {Customer} from "@/types/public-xs/Customer.ts";
import {ElMessage} from 'element-plus'

const emit = defineEmits(['submit-success', 'cancel']);

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<Customer>({
    id: 1,
    code: '',
    name: '',
    area: '',
    address: '',
    createdBy: 0,
    createDate: '',
    updateId: '',
    updateDate: '',
    money: 1,
    phoneNum: '',
    isDelete: 0
})

const rules = reactive<FormRules<Customer>>({
    code: [
        {required: true, message: '请输入客户编码', trigger: ['blur', 'change']},
        {min: 3, max: 5, message: '客户编码长度应为3到5个字符', trigger: ['blur', 'change']}
    ],
    name: [
        {required: true, message: '请输入客户名称', trigger: ['blur', 'change']},
        {min: 2, max: 50, message: '客户名称长度应为2到50个字符', trigger: ['blur', 'change']}
    ],
    phoneNum: [
        {required: true, message: '请输入手机号', trigger: ['blur', 'change']},
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入有效的11位手机号',
            trigger: ['blur', 'change']
        }
    ],
    address: [
        {required: true, message: '请输入地址', trigger: ['blur', 'change']},
        {max: 100, message: '业务地区长度不能超过100个字符', trigger: ['blur', 'change']}
    ],
    area: [
        {max: 100, message: '业务地区长度不能超过100个字符', trigger: ['blur', 'change']}
    ],
    money: [
        {required: true, message: '请输入交易金额', trigger: ['blur', 'change']},
        {type: 'number', min: 0, message: '交易金额必须为非负数', trigger: ['blur', 'change']}
    ]
})


// 提交表单
const submitForm = async () => {
    if (!ruleFormRef.value) return;
    await ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                // ruleForm.createdBy = localStorage.getItem("")
                console.log(ruleForm.id)

                const response = await axios.post('http://localhost:8083/Customer/insertCustomer', ruleForm);
                ElMessage.success('新增客户成功');
                // ElMessage.success('客户添加成功');
                resetForm(); // 提交成功后重置表单
            } catch (error) {
                ElMessage.error('添加失败，请稍后重试');
                console.error('添加失败:', error);
            }
        } else {
            ElMessage.warning('请完善表单信息');
        }
    });
};

// 重置表单
const resetForm = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.resetFields();
};

// 取消操作
const emitCancel = () => {
    emit('cancel'); // 通知父组件取消
};
</script>


<style scoped>
.demo-ruleForm{
    max-width: 500px;
    margin: 60px auto;
}
</style>
